<template>
  <div class="person_box">
    <div class="person_item" v-for="t in personList" :key="t.userId">
      <div class="text">座位号：{{ t.seatNum }}</div>
      <img class="img" :src="getAvatar(t.avatar)" />
      <div class="text">昵称：{{ t.nickName }}</div>
      <!--    ../../assets/avatar/头像-1.jpg-->
      <div class="text" style="margin: 3px 0">剩余筹码：{{ t.holdAmount }}</div>
      <div class="text">总下注：{{ t.totalBetAmount }}</div>
      <el-button type="danger" link @click="toKick(t)"> 踢人 </el-button>
    </div>
  </div>
</template>
<script setup>
import { roomKick } from "@/js/api";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { ref, defineProps } from "vue";

const props = defineProps({
  isJoin: {
    type: Boolean,
    default: false,
  },
  localUser: {
    type: Object,
    default: () => ({}),
  },
  personList: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["update"]);

const toKick = async (item) => {
  let isStart = false;
  try {
    isStart = await ElMessageBox.confirm("是否继续操作?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
  } catch {
    isStart = false;
  }
  if (!isStart) return;
  roomKick({ seatNum: item.seatNum }).then((res) => {
    if (res.code == 200) {
      ElMessage.success("操作成功");
      emit("update");
    }
  });
};
const getAvatar = (val) => {
  let num = 1;
  if (val) {
    let a = Number(val);
    if (!Number.isNaN(a)) {
      num = a % 55;
      if (num == 0) num = 1;
    }
  }
  return `/assets/avatar/头像-${num}.jpg`;
};
</script>

<style scoped lang="less">
.person_box {
  width: 100%;
  height: 350px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow-y: scroll;
  margin-bottom: 20px;
  //   border-radius: 10px;
  .person_item {
    width: 110px;
    height: 160px;
    background: rgba(255, 255, 255, 0.1);
    text-align: center;
    border-radius: 10px;
    padding: 5px 0;
    .img {
      height: 45px;
      width: 45px;
      border-radius: 50%;
      margin: 5px 0 3px 0;
    }
    .text {
      color: #fff;
      font-size: 12px;
    }
  }
}
.person_box::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* Firefox */
.person_box {
  scrollbar-width: none; /* 隐藏滚动条 */
  /* 或使用 'thin' + 透明颜色 */
}
</style>
